<!--
 * @Descripttion: 密码强度检测
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年6月2日15:36:01
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<div class="sc-password-strength">
		<div class="sc-password-strength-bar" :class="`sc-password-strength-level-${level}`"></div>
	</div>
</template>

<script>
	export default {
		props: {
			modelValue: { type: String, default: '' }
		},
		data() {
			return {
				level: 0
			}
		},
		watch: {
			modelValue() {
				this.strength(this.modelValue)
			}
		},
		mounted() {
			this.strength(this.modelValue)
		},
		methods: {
			strength(v) {
				var _level = 0
				//长度
				var has_length = v.length >= 6
				//包含数字
				var has_number = /\d/.test(v)
				//包含小写英文
				var has_lovercase = /[a-z]/.test(v)
				//包含大写英文
				var has_uppercase = /[A-Z]/.test(v)
				//没有连续的字符3位
				var no_continuity = !/(\w)\1{2}/.test(v)
				//包含特殊字符
				var has_special = /[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(v)

				if (v.length <= 0) {
					_level = 0
					this.level = _level
					return false
				}
				if (!has_length) {
					_level = 1
					this.level = _level
					return false
				}
				if (has_number) {
					_level += 1
				}
				if (has_lovercase) {
					_level += 1
				}
				if (has_uppercase) {
					_level += 1
				}
				if (no_continuity) {
					_level += 1
				}
				if (has_special) {
					_level += 1
				}
				this.level = _level
			}
		}
	}
</script>

<style scoped>
	.sc-password-strength {
		height: 5px;
		width: 100%;
		background: var(--el-color-info-light-5);
		border-radius: 5px;
		position: relative;
		margin: 10px 0;
	}
	.sc-password-strength:before {
		left: 20%;
	}
	.sc-password-strength:after {
		right: 20%;
	}
	.sc-password-strength:before,
	.sc-password-strength:after {
		position: absolute;
		content: '';
		display: block;
		width: 20%;
		height: inherit;
		border: 5px solid var(--el-bg-color-overlay);
		border-top: 0;
		border-bottom: 0;
		z-index: 1;
		background-color: transparent;
		box-sizing: border-box;
	}
	.sc-password-strength-bar {
		position: absolute;
		height: inherit;
		width: 0%;
		border-radius: inherit;
		transition:
			width 0.5s ease-in-out,
			background 0.25s;
		background: transparent;
	}
	.sc-password-strength-level-1 {
		width: 20%;
		background-color: var(--el-color-error);
	}
	.sc-password-strength-level-2 {
		width: 40%;
		background-color: var(--el-color-error);
	}
	.sc-password-strength-level-3 {
		width: 60%;
		background-color: var(--el-color-warning);
	}
	.sc-password-strength-level-4 {
		width: 80%;
		background-color: var(--el-color-success);
	}
	.sc-password-strength-level-5 {
		width: 100%;
		background-color: var(--el-color-success);
	}
</style>
